<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "LineChart",
  mounted() {
    const lineChart = echarts.init(this.$refs.charts);
    //配置数据
    lineChart.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [1, 6, 5, 4, 9, 4, 5, 7, 2, 6, 3, 5, 4],
          smooth:true,
          itemStyle: {
            opacity: 0,
          }, //拐点样式设置
          lineStyle:{
            color:'purple'
          },
          //填充
          areaStyle: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#fff", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "purple", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      ],
      //布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
